<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="searchObj.data.module" size="medium" class="global-search-box" placeholder="模块类型"/>
      <el-input v-model="searchObj.data.operate" size="medium" class="global-search-box" placeholder="操作类型"/>
      <el-input v-model="searchObj.data.username" size="medium" class="global-search-box" placeholder="请求用户"/>
      <el-date-picker
        v-model="time"
        size="medium"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="onChangeTime"
      />
      <el-button icon="el-icon-search" type="primary" size="medium" @click="search">搜索</el-button>
      <el-button type="primary" size="medium" @click="reset">重置</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="listData"
      element-loading-text="Loading"
      fit
      border
      highlight-current-row>
      <el-table-column prop="module" label="请求模块"/>
      <el-table-column prop="operate" label="执行操作"/>
      <el-table-column prop="time_consuming" label="耗时（ms毫秒）"/>
      <el-table-column prop="request_url" label="请求路径" min-width="130"/>
      <el-table-column prop="user_ip" label="用户IP" min-width="100"/>
      <el-table-column prop="parameters" label="请求参数" min-width="100">
        <template slot-scope="scope">
          <el-popover placement="left" style="min-width: 160px" trigger="hover">
            <div style="max-width: 300px;word-wrap: break-word">{{ scope.row.parameters }}</div>
            <div slot="reference" class="exception_info">{{ scope.row.parameters }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="request_user" label="请求用户"/>
      <el-table-column prop="create_date" label="日志产生日期" min-width="150"/>
    </el-table>
    <div class="global-paging">
      <el-pagination
        :page-size="10"
        :total="total"
        :page-sizes="[10, 20, 40]"
        :current-page.sync="searchObj.currentNo"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import commonApi from '@/api/commonApi'
import { parseTime } from '@/utils/index'
export default {
  name: 'LoginLog',
  data() {
    return {
      listData: [], // 表格数据
      total: null, // 总列表条数
      // 搜索列表条件
      searchObj: {
        currentNo: 1,
        pageSize: 10,
        data: {
          module: '',
          operate: '',
          username: '',
          beginTime: '',
          endTime: ''
        }
      },
      time: ''// 开始日期-结束日期
    }
  },
  created() {
    // 获取列表数据
    this.getListData()
  },
  methods: {
    // 选中日期事件
    onChangeTime(time) {
      this.searchObj.data.beginTime = parseTime(time[0], '{y}-{m}-{d} {h}:{i}:{s}')
      this.searchObj.data.endTime = parseTime(time[1], '{y}-{m}-{d} {h}:{i}:{s}')
    },
    // 获取登录日志的列表数据
    getListData() {
      this.listLoading = true
      commonApi('/log/conLog', 'post', this.searchObj).then(response => {
        if (response.code === 1) {
          this.listData = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        }
      })
    },
    // 点击搜索按钮
    search() {
      this.searchObj.currentNo = 1
      this.getListData()
    },
    // 点击重置按钮
    reset() {
      for (const index in this.searchObj.data) {
        this.searchObj.data[index] = ''
        this.time = ''
      }
      this.getListData()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.searchObj.pageSize = val
      this.getListData()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.searchObj.currentNo = val
      this.getListData()
    }
  }
}
</script>

  <style scoped>
    .exception_info{
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>

